<template>
	<view>
		<ul class="list">
			<li>
				<view class="left"><image  src="@/static/icon-font/PM2.5.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.pmTwoFive == null ? "--":conditionList.pmTwoFive}}</view>
					<view class="below">PM2.5</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/PM10.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.pmTen == null ? "--":conditionList.pmTen}}</view>
					<view class="below">PM10</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/noice.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.zaosheng == null ? "--":conditionList.zaosheng}}</view>
					<view class="below">噪声</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/temperature.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.wendu== null ? "--":conditionList.wendu}}</view>
					<view class="below">温度</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/kongqishidu.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.shidu == null ? "--":conditionList.shidu}}</view>
					<view class="below">湿度</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/fengli.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.fengli == null ? "--":conditionList.fengli}}</view>
					<view class="below">风力</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/fengsu.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.fengsu == null ? "--":conditionList.fengsu}}</view>
					<view class="below">风速</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/fengxiangbiao.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.fengxiangDangWei == null ? "--":conditionList.fengxiangDangWei}}</view>
					<view class="below">风向(8)</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/fengxiang.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.fengxiang == null ? "--":conditionList.fengxiang}}</view>
					<view class="below">风向</view>
				</view>
			</li>
			<li>
				<view class="left"><image src="@/static/icon-font/daqiya.png" alt="图标"></view>
				<view class="right">
					<view class="up">{{conditionList.daqiya == null ? "--":conditionList.daqiya}}</view>
					<view class="below">大气压</view>
				</view>
			</li>	
		</ul>
	
	 </view>
</template>

<script>
	export default {
		name:'list',
		props:['conditionList']
	}
	
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
		}
	.list {
		width: 100%;
		padding: 22rpx 0 0 50rpx;
		overflow: hidden;
	} 

	.list li {		
		width: 42%;
		height: 180rpx;
		background: #FFFFFF;
		float: left;
		box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 5px 5px 5px 5px;
		margin-bottom: 30rpx;
		margin-right:56rpx;
	}

	.list li .left {
		float: left;
		width: 50%;
		height: 188rpx;
		text-align: center;
		line-height: 240rpx;
	}

	.list li .left image {
		margin: auto;
		width: 50%;
		height: 50%;
		text-align: center;
	}


	.list li .right {
		float: left;
		text-align: center;
		line-height: 94rpx;
	}

	.list li .right .up {
		font-size: 48rpx;
		font-weight: bold;
		color: #111111;
	}

	.list li .right .below {
		font-size: 40rpx;
		font-weight: 400;
		color: #3A3A3A;
	}
</style>